<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    body {
      font-family: "Bitter", serif;
      background: #333;
      color: white;
    }

    #app {
      text-align: center;
      margin: 60px;
      margin: 0 auto;
      display: table;
    }

    button {
      font-family: "Bitter";
      background: #c62735;
      color: white;
      border: 0;
      padding: 5px 15px;
      margin: 0 10px;
      border-radius: 4px;
      outline: 0;
      cursor: pointer;
    }

    .img-contain {
      width: 250px;
      height: 160px;
      overflow: hidden;
      transform-origin: 50% 50%;
    }

    img {
      width: 100%;
      transform-origin: 50% 50%;
      cursor: pointer;
      transform: scaleY(1) translateZ(0);
      margin: 5px;
    }

    main {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .img-contain:hover .overlay {
      opacity: 1;
      background: hsla(50, 0%, 0%, 0.6);
      transition: 0.3s all ease-out;
    }

    .img-contain .overlay {
      position: absolute;
      z-index: 1000;
      display: block;
      width: 245px;
      height: 155px;
      margin: 5px;
      opacity: 0;
      overflow: hidden;
      transition: 0.3s all ease-in;
    }

    .overlay-text {
      margin-top: 40px;
    }

    h4 {
      margin: 0 0 15px;
    }

    .flip-enter-active {
      transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
      transform-origin: 50% 50%;
    }

    .flip-leave-active {
      transform-origin: 50% 50%;
      transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .flip-enter-from,
    .flip-leave-to {
      transform-origin: 50% 50%;
      transform: scaleY(0) translateZ(0);
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>Hover us</h3>
    <main>
      <app-child>
        <img src="https://images.unsplash.com/photo-1520182205149-1e5e4e7329b4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
      </app-child>
      <app-child>
        <img src="https://images.unsplash.com/photo-1501421018470-faf26f6b1bef?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
      </app-child>
    </main>
  </div>

  <script>
    const app = Vue.createApp({
      setup() {
      }
    })

    app.component('app-child', {
      setup() {
        const isShowing = Vue.ref(false)
        const toggleShow = () => {
          isShowing.value = !isShowing.value
        }
        return {
          isShowing,
          toggleShow
        }
      },
      template: `
      <div class="img-contain">
        <div class="overlay">
          <p class="overlay-text">I don't like this one</p>
          <button @click="toggleShow">Replace!</button>
        </div>
        <transition name="flip" mode="out-in">
          <div v-if="!isShowing">
            <slot></slot>
          </div>
          <img v-else src="https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        </transition>
      </div>
      `
    })

    app.mount('#app')
  </script>
</body>
</html>